<template>
  <el-tabs v-model="currentRoute" type="card" class="f-tag-menu" @tab-remove="tabRemove" @tab-change="tabChange">
    <template #addIcon>
      <span></span>
    </template>
    <el-tab-pane v-for="tab in tabs" :closable="tab.name !== '/'" :key="tab.code" :label="tab.meta.title" :name="tab.name" />
  </el-tabs>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const currentRoute = ref('')
const staticTagMenu = {
  code: '/',
  meta: { title: '首页' },
  name: '/',
  path: '/',
  href: '/',
  fullPath: '/'
}
const tabs = ref([staticTagMenu])

watch(
  route,
  (n) => {
    if (n.name !== '/') {
      if (!tabs.value.find((item) => item.name === n.name)) {
        tabs.value.push({ ...n })
      }
      currentRoute.value = n.name
    } else {
      currentRoute.value = '/'
    }
  },
  { deep: true, immediate: true }
)

const tabRemove = (targetName) => {
  tabs.value = tabs.value.filter((item) => {
    return item.name !== targetName
  })
  console.log(route)
  if (route.name !== targetName) return
  router.push(tabs.value[tabs.value.length - 1].name)
}

const tabChange = (targetName) => {
  if (route.name === targetName) {
    return false
  }
  router.push(targetName)
}
</script>

<style scoped>
.f-tag-menu {
  height: 30px;
  width: 100%;
  border: none;
  margin: unset;
}
:deep(.el-tabs__header) {
  height: 30px;
  border: none;
  margin: unset;
}
:deep(.el-tabs__item) {
  height: 30px;
  box-sizing: border-box;
  border-left: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-right: 1px solid #ececec !important;
}
:deep(.el-tabs__item:first-child) {
  border-left: 1px solid #ececec !important;
}
:deep(.el-tabs__nav) {
  border: none !important;
}
:deep(.el-tabs__new-tab) {
  display: none;
}
:deep(.el-tabs__nav-prev),
:deep(.el-tabs__nav-next) {
  line-height: 30px;
}
</style>
